import { Avatar, Button, Dropdown } from "antd";
import IconMap from "./IconMap";
import { history, useSelector } from "umi";
import { useCallback, useEffect, useState } from "react";

const _Header = (props: any) => {
  const { Header, collapse, setCollapse } = props;
  const userInfo = useSelector((state: any) => state.user.userInfo);
  //   console.log(userInfo);
  const loginOut = useCallback(() => {
    sessionStorage.clear();
    history.replace("/users/login");
  }, []);

  const items = {
    items: [
      {
        key: "1",
        label: (
          <Button type="text" onClick={loginOut}>
            退出登录
          </Button>
        ),
      },
    ],
  };
  return (
    <Header className="bg-white flex justify-between items-center overflow-auto">
      <div
        className="    cursor-pointer text-xl transition-all"
        onClick={() => {
          setCollapse(!collapse);
          sessionStorage.setItem("collapse", JSON.stringify(!collapse));
        }}
      >
        {collapse ? IconMap.MenuFoldOutlined : IconMap.MenuUnfoldOutlined}
      </div>

      <Dropdown arrow menu={items}>
        <div className="flex gap-2 items-center cursor-pointer">
          <span>{userInfo.username}</span>
          <Avatar
            style={{ backgroundColor: "#E97A6F", verticalAlign: "middle" }}
            size="large"
            gap={10}
          >
            {userInfo.username.slice(0, 2)}
          </Avatar>
        </div>
      </Dropdown>
    </Header>
  );
};
export default _Header;
